<template>
  <div class="app-container">
    <div id="main" style="width: 100%;height:800px;background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);" />
    <!-- ECharts will render here -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { studentSelectClassCount } from '@/api/table.js'

export default {
  data() {
    return {
      chartData: []
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
       try {
         const response = await studentSelectClassCount();
         
         if (response.data.code === 200) {
           this.chartData = response.data.data;
           console.log("this.chartData",this.chartData)
           this.initChart();
         }
       } catch (error) {
         console.error('获取数据失败:', error);
         // 使用默认数据
         this.chartData = [
           { className: "一年级一班", count: 25 },
           { className: "一年级二班", count: 30 },
           { className: "一年级三班", count: 28 },
           { className: "一年级四班", count: 32 }
         ];
         this.initChart();
       }
     },
    
    initChart() {
      const myChart = echarts.init(document.getElementById('main'));
      
      const classNames = this.chartData.map(item => item.className);
      const counts = this.chartData.map(item => item.count);
      
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '学员班级分布统计',
          subtext: 'Student Class Distribution',
          left: 'center',
          top: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 32,
            fontWeight: 'bold',
            textShadowColor: 'rgba(102, 126, 234, 0.8)',
            textShadowOffsetX: 2,
            textShadowOffsetY: 2,
            textShadowBlur: 10
          },
          subtextStyle: {
            color: '#e0e6ff',
            fontSize: 16,
            textShadowColor: 'rgba(240, 147, 251, 0.6)',
            textShadowBlur: 5
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(102, 126, 234, 0.9)',
          borderColor: '#f093fb',
          borderWidth: 2,
          borderRadius: 10,
          boxShadow: '0 8px 32px rgba(102, 126, 234, 0.4)',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          formatter: function(params) {
            return `<div style="padding: 15px; border-radius: 8px; background: linear-gradient(45deg, rgba(240, 147, 251, 0.2), rgba(102, 126, 234, 0.2));">
              <div style="color: #ffffff; font-weight: bold; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${params[0].name}</div>
              <div style="color: #e0e6ff;">学员人数: <span style="color: #f093fb; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">${params[0].value}</span></div>
            </div>`;
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: classNames,
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 3,
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 8
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 16,
            fontWeight: 'bold',
            rotate: 0,
            margin: 15,
            textShadowColor: 'rgba(102, 126, 234, 0.8)',
            textShadowBlur: 4
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(255, 255, 255, 0.3)',
              shadowBlur: 4
            }
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 3,
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 8
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 16,
            fontWeight: 'bold',
            textShadowColor: 'rgba(102, 126, 234, 0.8)',
            textShadowBlur: 4
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)',
              type: 'dashed',
              shadowColor: 'rgba(240, 147, 251, 0.4)',
              shadowBlur: 3
            }
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(255, 255, 255, 0.3)',
              shadowBlur: 4
            }
          }
        },
        series: [
          {
            name: '学员人数',
            type: 'line',
            data: counts,
            smooth: true,
            symbol: 'diamond',
            symbolSize: 15,
            lineStyle: {
              color: '#f093fb',
              width: 5,
              shadowColor: 'rgba(240, 147, 251, 0.8)',
              shadowBlur: 15,
              shadowOffsetY: 3
            },
            itemStyle: {
              color: '#f093fb',
              borderColor: '#ffffff',
              borderWidth: 4,
              shadowColor: 'rgba(240, 147, 251, 0.9)',
              shadowBlur: 20
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(240, 147, 251, 0.8)' },
                { offset: 0.5, color: 'rgba(102, 126, 234, 0.6)' },
                { offset: 1, color: 'rgba(240, 147, 251, 0.1)' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: '#ffffff',
                borderColor: '#f093fb',
                borderWidth: 5,
                shadowColor: 'rgba(255, 255, 255, 0.9)',
                shadowBlur: 25
              }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ],
              itemStyle: {
                color: '#ffffff',
                shadowColor: 'rgba(255, 255, 255, 0.9)',
                shadowBlur: 20
              },
              label: {
                color: '#f093fb',
                fontWeight: 'bold',
                fontSize: 14,
                textShadowColor: 'rgba(240, 147, 251, 0.8)',
                textShadowBlur: 8
              }
            },
            animationDuration: 2500,
            animationEasing: 'bounceOut'
          }
        ],
        animationDuration: 3500,
        animationEasing: 'elasticOut'
      };
      
      myChart.setOption(option);
      
      // 添加窗口大小变化监听
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {});
  }
}
</script>

<style scoped>
.app-container {
  /* padding: 20px; */
  /* background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); */
  /* min-height: 100vh; */
}

#main {
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(240, 147, 251, 0.5);
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4), 0 0 30px rgba(240, 147, 251, 0.3);
}
</style>
